body {
    background-color: rgb(212, 255, 253);
    max-width: 100%;
    height: 100%;
}

#header,
#mySidebar {
    background-color: rgb(0, 27, 58);
}

#ph1 {
    position: absolute;
    left: 50%;
    margin-left: -350px;
    margin-top: -10px;
    max-width: 200%;
}

.img1 {
    max-width: 200%;
}

.wall {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -380px;
    margin-top: 35%;
    width: 100%;
}

a .top {
    color: rgba(0, 110, 255, 0.644);
    background-color: rgba(255, 253, 157, 0.788)
}

#ph2 {
    position: absolute;
    left: 50%;
    margin-left: -307px;
    max-width: 200%;
    margin-top: -20px;
}

.wall div[class^="col"] {
    float: left;
    margin-right: 5px;
    margin-bottom: 10px;
}

.wall .row {
    margin-bottom: 10px;
}

.wall .row:nth-of-type(1)>div[class^="col"]>div {
    height: 410px;
}

.wall .row:nth-of-type(1)>div[class^="col"]>div.half {
    height: 200px;
}

.wall .row:nth-of-type(1)>div[class^="col"]>div.half:nth-of-type(1) {
    margin-bottom: 10px;
}

.wall .row:nth-of-type(2)>div[class^="col"]>div {
    height: 515px;
}

.wall .row:nth-of-type(3)>div[class^="col"]>div {
    height: 200px;
}

.wall .container img {
    margin-top: 1%;
    width: 200%;
    max-width: 100%;
    border: inset 2px rgb(0, 153, 255);
}

@media (max-width:300px) {
    #ph1 {
        position: absolute;
        left: 50%;
        margin-left: -50%;
        max-width: 100%;
    }
    #ph2 {
        position: absolute;
        left: 50%;
        margin-left: -50%;
        max-width: 100%;
    }
    .wall {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50%;
        width: 100%;
    }
    .img1 {
        width: 200%;
        margin-top: 10%
    }
    .row>div>div {
        height: 100% !important;
        max-width: 300px;
    }
}

@media (max-width:600px) {
    #ph1 {
        position: absolute;
        left: 50%;
        margin-left: -50%;
        max-width: 100%;
    }
    #ph2 {
        position: absolute;
        left: 50%;
        margin-left: -50%;
        max-width: 100%;
    }
    .wall {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50%;
        width: 100%;
    }
    .img1 {
        width: 200%;
        margin-top: 10%
    }
    .row>div>div {
        height: 100% !important;
        max-width: 300px;
    }
}

@media (max-width:768px) {
    #ph1 {
        position: absolute;
        left: 50%;
        margin-left: -50%;
        max-width: 100%;
    }
    #ph2 {
        position: absolute;
        left: 50%;
        margin-left: -50%;
        max-width: 100%;
    }
    .wall {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: 50%;
        margin-left: -50%;
        width: 100%;
    }
    .img1 {
        width: 200%;
        margin-top: 10%
    }
    .row>div>div {
        height: 100% !important;
        max-width: 300px;
    }
}

@media (max-width:992px) and (min-width:300px) {
    #ph1 {
        position: absolute;
        left: 50%;
        margin-left: -50%;
        max-width: 100%;
    }
    #ph2 {
        position: absolute;
        left: 50%;
        margin-left: -50%;
        max-width: 100%;
    }
    .wall {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: 50%;
        margin-left: -50%;
        width: 100%;
    }
    .img1 {
        width: 200%;
        margin-top: 10%
    }
    .row>div>div {
        height: 100% !important;
        max-width: 300px;
    }
}